<template>
  <div class="CDRPresentation">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dUpMain"></div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <div style="margin: 10px">
            <el-input
              @focus="changeTime"
              v-model="isTime"
              size="mini"
              style="display: inline-block; width: 10%"
            ></el-input>
            <el-button
              style="margin-left: 10px"
              size="small"
              icon="el-icon-search"
              @click="getTableData_left"
            ></el-button>
          </div>
          <template>
            <el-table
              :data="tableData_left"
              style="width: 100%"
              :row-key="getRowKeys_left"
              :expand-row-keys="expands_left"
              @expand-change="expandSelect_left"
              class="table_left"
              v-loading="left_table_loading"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-tabs
                    v-model="activeName_left"
                    type="card"
                    @tab-click="handleClick"
                    style="width: 90%; margin-left: 30px"
                  >
                    <el-tab-pane label="服务对象" name="first">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="生效日期">
                          <span>{{ props.row.CreateDate }}</span>
                        </el-form-item>
                        <el-form-item label="失效日期">
                          <span>{{ props.row.EffDate }}</span>
                        </el-form-item>
                        <el-form-item label="机构名称">
                          <span>{{ props.row.Organization }}</span>
                        </el-form-item>
                        <el-form-item label="标识对象">
                          <span>{{ props.row.NameObj }}</span>
                        </el-form-item>
                        <el-form-item label="标识对象代码" label-width="100px">
                          <span>{{ props.row.NameObjCode }}</span>
                        </el-form-item>
                        <el-form-item label="姓名">
                          <span>{{ props.row.Name }}</span>
                        </el-form-item>
                        <el-form-item label="病人类型代码" label-width="100px">
                          <span>{{ props.row.TypeCode }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="个体生物学" name="second">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="ABO 血型">
                          <span>{{ props.row.ABOCode }}</span>
                        </el-form-item>
                        <el-form-item label="RH 血型">
                          <span>{{ props.row.RHCode }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="个体危险性" name="third">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="个体危险性名称">
                          <span>{{ props.row.Risk }}</span>
                        </el-form-item>
                        <el-form-item label="个体危险性代码">
                          <span>{{ props.row.RiskCode }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="人口学" name="fourth">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="性别代码">
                          <span>{{ props.row.Gender }}</span>
                        </el-form-item>
                        <el-form-item label="年龄">
                          <span>{{ props.row.Age }}</span>
                        </el-form-item>
                        <el-form-item label="国籍代码">
                          <span>{{ props.row.CountryCode }}</span>
                        </el-form-item>
                        <el-form-item label="民族代码">
                          <span>{{ props.row.NationCode }}</span>
                        </el-form-item>
                        <el-form-item label="婚姻状况类别代码">
                          <span>{{ props.row.Marital }}</span>
                        </el-form-item>
                        <el-form-item label="职业编码系统名称">
                          <span>{{ props.row.Professional }}</span>
                        </el-form-item>
                        <el-form-item label="职业代码">
                          <span>{{ props.row.ProfessionalCode }}</span>
                        </el-form-item>
                        <el-form-item label="文化程度代码" label-width="100px">
                          <span>{{ props.row.EduLevel }}</span>
                        </el-form-item>
                        <el-form-item label="出生日期">
                          <span>{{ props.row.Born }}</span>
                        </el-form-item>
                        <el-form-item label="出生地">
                          <span>{{ props.row.BornAddress }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="联系人" name="fifth">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="类别代码">
                          <span>{{ props.row.ContactCateogry }}</span>
                        </el-form-item>
                        <el-form-item label="号码">
                          <span>{{ props.row.ContactIdCard }}</span>
                        </el-form-item>
                        <el-form-item label="生效日期">
                          <span>{{ props.row.ContactCreateDate }}</span>
                        </el-form-item>
                        <el-form-item label="失效日期">
                          <span>{{ props.row.ContactEffDate }}</span>
                        </el-form-item>
                        <el-form-item label="机构名称">
                          <span>{{ props.row.ContactOrganization }}</span>
                        </el-form-item>
                        <el-form-item label="标识对象">
                          <span>{{ props.row.ContactObj }}</span>
                        </el-form-item>
                        <el-form-item label="标识对象代码" label-width="100px">
                          <span>{{ props.row.ContactObjCode }}</span>
                        </el-form-item>
                        <el-form-item label="联系人-姓名">
                          <span>{{ props.row.ContactName }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="地址" name="sixth">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="工作单位名称" label-width="100px">
                          <span>{{ props.row.Company }}</span>
                        </el-form-item>
                        <el-form-item label="地址类别">
                          <span>{{ props.row.AddressCode }}</span>
                        </el-form-item>
                        <el-form-item label="地址-省">
                          <span>{{ props.row.Province }}</span>
                        </el-form-item>
                        <el-form-item label="地址-市">
                          <span>{{ props.row.City }}</span>
                        </el-form-item>
                        <el-form-item label="地址-县">
                          <span>{{ props.row.Area }}</span>
                        </el-form-item>
                        <el-form-item label="地址-乡">
                          <span>{{ props.row.Countryside }}</span>
                        </el-form-item>
                        <el-form-item label="地址-村">
                          <span>{{ props.row.Village }}</span>
                        </el-form-item>
                        <el-form-item label="地址-门牌号码" label-width="110px">
                          <span>{{ props.row.HouseNumber }}</span>
                        </el-form-item>
                        <el-form-item label="邮政编码">
                          <span>{{ props.row.ZipCode }}</span>
                        </el-form-item>
                        <el-form-item label="行政区划代码" label-width="110px">
                          <span>{{ props.row.DivisionCode }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="通信" name="seventh">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="联系电话-类别" label-width="110px">
                          <span>{{ props.row.TelCategory }}</span>
                        </el-form-item>
                        <el-form-item
                          label="联系电话-类别代码"
                          label-width="130px"
                        >
                          <span>{{ props.row.TelCategoryCode }}</span>
                        </el-form-item>
                        <el-form-item label="联系电话-号码" label-width="110px">
                          <span>{{ props.row.Telphone }}</span>
                        </el-form-item>
                        <el-form-item label="电子邮件地址" label-width="100px">
                          <span>{{ props.row.Email }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="医保" name="eighth">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="医疗保险-类别" label-width="110px">
                          <span>{{ props.row.Medical }}</span>
                        </el-form-item>
                        <el-form-item
                          label="医疗保险-类别代码"
                          label-width="130px"
                        >
                          <span>{{ props.row.MedicalCode }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="卫生服务机构" name="ninth">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="机构名称">
                          <span>{{ props.row.MedicOrganization }}</span>
                        </el-form-item>
                        <el-form-item label="机构组织代码" label-width="100px">
                          <span>{{ props.row.MedicOrganizationCode }}</span>
                        </el-form-item>
                        <el-form-item label="机构负责人">
                          <span>{{ props.row.MedicLegal }}</span>
                        </el-form-item>
                        <el-form-item label="机构地址">
                          <span>{{ props.row.MedicAddress }}</span>
                        </el-form-item>
                        <el-form-item label="科室名称">
                          <span>{{ props.row.MedicDepart }}</span>
                        </el-form-item>
                        <el-form-item label="机构角色">
                          <span>{{ props.row.MedicOrgRole }}</span>
                        </el-form-item>
                        <el-form-item label="机构角色代码" label-width="100px">
                          <span>{{ props.row.MedicOrgRoleCode }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="卫生服务者" name="tenth">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item
                          label="服务者平台编码"
                          label-width="110px"
                        >
                          <span>{{ props.row.MedicCode }}</span>
                        </el-form-item>
                        <el-form-item label="服务者姓名">
                          <span>{{ props.row.MedicName }}</span>
                        </el-form-item>
                        <el-form-item label="服务者职责">
                          <span>{{ props.row.MedicRole }}</span>
                        </el-form-item>
                        <el-form-item
                          label="服务者职责代码"
                          label-width="110px"
                        >
                          <span>{{ props.row.MedicRoleCode }}</span>
                        </el-form-item>
                        <el-form-item
                          label="服务者医师资格标志"
                          label-width="150px"
                        >
                          <span>{{ props.row.MedicDoctorCert }}</span>
                        </el-form-item>
                        <el-form-item label="服务者学历">
                          <span>{{ props.row.MedicEducation }}</span>
                        </el-form-item>
                        <el-form-item
                          label="服务者所学专业"
                          label-width="110px"
                        >
                          <span>{{ props.row.MedicMajor }}</span>
                        </el-form-item>
                        <el-form-item
                          label="服务者专业技术职称"
                          label-width="150px"
                        >
                          <span>{{ props.row.MedicProfessional }}</span>
                        </el-form-item>
                        <el-form-item label="服务者职务">
                          <span>{{ props.row.MedicJob }}</span>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                  </el-tabs>
                </template>
              </el-table-column>
              <el-table-column width="100" label="患者主索引" prop="Code">
              </el-table-column>
              <el-table-column label="类别代码" prop="Category" width="80px">
              </el-table-column>
              <el-table-column label="号码" prop="IdCard"> </el-table-column>
              <el-table-column label="姓名" prop="Name"> </el-table-column>
              <el-table-column label="性别代码" prop="Gender" width="80px">
              </el-table-column>
              <el-table-column label="年龄" prop="Age" width="50px">
              </el-table-column>
              <el-table-column label="出生日期" prop="Born"> </el-table-column>
              <el-table-column label="出生地" prop="BornAddress">
              </el-table-column>
              <el-table-column label="联系电话" prop="Telphone">
              </el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" @click="toView(scope.row)"
                    >CDR</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
          <div class="block numY">
            <el-pagination
              layout="prev, pager, next"
              :total="page_left.total"
              :page-size="page_left.limit"
              @current-change="left_pag_change"
            >
            </el-pagination>
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
              :append-to-body="true"
            >
              <el-calendar
                v-model="value"
                :first-day-of-week="1"
                id="calendar"
                @change="timeChange"
              >
                <template slot="dateCell" slot-scope="{ date, data }">
                  <div slot="reference" class="div-Calendar">
                    <el-button
                      style="width: 100%"
                      :disabled="rqi.indexOf(data.day) > -1 ? false : true"
                      :class="rqi.indexOf(data.day) > -1 ? 'is-selected' : ''"
                      @click="click_times(data)"
                    >
                      {{ data.day.split("-").slice(2).join("-") }}
                    </el-button>
                  </div>
                </template>
              </el-calendar>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tableData_left: [],
      activeName_left: "first",
      expands_left: [],
      page_left: {
        total: 1,
        page: 1,
        limit: 5,
      },
      left_table_loading: false,
      expands_left: [],
      isTime: "",
      dialogVisible: false,
      value: new Date(),
      rqi: [],
      newTime: "",
      // 临时存放三个按钮
      prevBtn: {},
      nextBtn: {},
      todayBtn: {},
      flag: true,
    };
  },
  methods: {
    getTableData_left() {
      this.left_table_loading = true;
      this.$post(
        "/Patient/PageList?page=" +
          this.page_left.page +
          "&limit=" +
          this.page_left.limit +
          "&keyword=" +
          this.isTime
      ).then((res) => {
        if (res.code == 0) {
          this.tableData_left = res.data.list;
          this.page_left.total = res.data.TotalCount;
          this.left_table_loading = false;
        } else if (res.code == -1) {
          this.$message.error(res.msg);
          this.left_table_loading = false;
        }
      });
    },
    left_pag_change(val) {
      this.page_left.page = val;
      this.getTableData_left();
    },
    getRowKeys_left: function (row) {
      return row.Code;
    },
    expandSelect_left: function (row, expandedRows) {
      var that = this;
      if (expandedRows.length) {
        that.expands_left = [];
        if (row) {
          that.expands_left.push(row.Code);
          this.activeName_left = "first";
        }
      } else {
        that.expands_left = [];
      }
    },
    toView(val) {
      let Code = val.Code;
      let routeData = this.$router.resolve({ path: "/CDR", query: { Code } });
      // window.open(routeData.href, '_blank');
      this.$router.push(routeData.href);
    },
    handleClick(val) {
      // console.log(val);
    },
    changeTime() {
      if (this.flag) {
        setTimeout(() => {
          // 点击前一个月
          this.prevBtn = document.querySelector(
            ".el-calendar__button-group .el-button-group>button:nth-child(1)"
          );
          this.prevBtn.addEventListener("click", () => {
            setTimeout(() => {
              this.gettime(this.value);
            }, 100);
            return;
          });
          //点击下一个月
          this.nextBtn = document.querySelector(
            ".el-calendar__button-group .el-button-group>button:nth-child(3)"
          );
          this.nextBtn.addEventListener("click", () => {
            setTimeout(() => {
              this.gettime(this.value);
            }, 100);
            return;
          });
          //点击今天
          this.todayBtn = document.querySelector(
            ".el-calendar__button-group .el-button-group>button:nth-child(2)"
          );
          this.todayBtn.addEventListener("click", () => {
            setTimeout(() => {
              this.gettime(this.value);
            }, 100);
            return;
          });
          this.flag = false;
        }, 500);
        this.dialogVisible = true;
        // this.gettime(this.value)
      } else {
        setTimeout(() => {
          // 点击前一个月
          if (this.prevBtn.addEventListener("click", () => {})) {
            this.gettime(this.value);
          }
          // this.prevBtn.addEventListener("click", () => {
          //   setTimeout(() => {
          //     this.gettime(this.value)
          //   }, 100)
          //   return
          // });
          //点击下一个月
          if (this.nextBtn.addEventListener("click", () => {})) {
            this.gettime(this.value);
          }
          // this.nextBtn.addEventListener("click", () => {
          //   setTimeout(() => {
          //   }, 100)
          //   return

          // });
          //点击今天
          if (this.todayBtn.addEventListener("click", () => {})) {
            this.gettime(this.value);
          }
          // this.todayBtn.addEventListener("click", () => {
          //   setTimeout(() => {
          //   }, 100)
          //   return
          // });
          this.flag = false;
        }, 500);
        this.dialogVisible = true;
      }
    },
    handleClose(done) {
      this.dialogVisible = false;
      // this.isTime = ''
      this.value = new Date();
    },
    click_times(val) {
      console.log(val);
      this.isTime = val.day;
      this.dialogVisible = false;
    },
    getList(val) {
      console.log(val);
      this.rqi = ["2021-11-11", "2021-11-15"];
      return;
    },
    timeChange(val) {
      console.log(val);
    },
    gettime(data) {
      let value =
        data.getFullYear() +
        "-" +
        this.checkTime(data.getMonth() + 1) +
        "-" +
        this.checkTime(data.getDate()) +
        " ";
      // this.checkTime(data.getHours()) + ':' +
      // this.checkTime(data.getMinutes()) + ':' +
      // this.checkTime(data.getSeconds());
      this.newTime = value;
      console.log(this.newTime);
      setTimeout(() => {
        this.getList(this.newTime);
      }, 100);
      return;
    },
    checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    },
  },
  mounted() {
    // document.getElementById("2").focus();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }

    this.rqi = ["2021-11-11", "2021-11-15"];
  },
};
</script>
<style lang="scss">
.CDRPresentation {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .numY {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
  }
  .el-calendar-table .el-calendar-day {
    text-align: center;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .is-selected {
    color: #52a7ff;
    // background: rgb(216, 202, 0);
  }
}
</style>
